<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改查</title>
</head>
<body>
    <div id="app">
        <table border="1px">
            <button>添加</button>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>james</td>
                    <td>男</td>
                    <td>29</td>
                    <td>
                        <button>修改</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="box">
            <div class="close">隐藏</div>
            <table class="edit">
                <tr>
                    <td>编号：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>操作：</td>
                    <td>
                        <!-- isAdd返回true，显示添加按钮，否则显示修改按钮 -->
                        <button>添加</button>
                        <button>修改</button>
                        <button>取消</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        // el表示绑定页面那个根标签
        el: '#app',
        // 表示整个页面的所有数据部分
        data: {
        },
        // 表示整个页面的自定义方法
        methods: {

        }
    });
</script>
</html>